<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>菜单管理--右边列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/css/public.css" media="all"/>
    <link rel="stylesheet" href="/layui_ext/dtree/dtree.css" media="all"/>
    <link rel="stylesheet" href="/layui_ext/dtree/font/dtreefont.css" media="all"/>
</head>
<body class="childrenBody">
<!-- 数据表格开始 -->
<div>
    <table class="layui-hide" id="menuTable" lay-filter="menuTable"></table>
    <div id="menuToolBar" style="display: none;">
        <button type="button" lay-event="add"  class="layui-btn layui-btn-sm">
            <span class="layui-icon layui-icon-add-1"></span>添加菜单
        </button>
    </div>
    <div id="menuRowBar" style="display: none;">
        <button type="button" lay-event="update" class="layui-btn layui-btn-sm"><span class="layui-icon layui-icon-edit"></span>编辑</button>
        <button type="button" lay-event="delete"  class="layui-btn layui-btn-sm layui-btn-danger"><span class="layui-icon layui-icon-delete"></span>删除</button>
    </div>
</div>
<!-- 数据表格结束 -->
<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 5px" id="addOrUpdateDiv">
    <form action="" method="post" class="layui-form layui-form-pane" id="dataFrm" lay-filter="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-block">
                <input type="hidden" name="id">
                <input type="text" name="title" lay-verify="required" placeholder="请输入菜单名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">父级菜单</label>
            <div class="layui-input-block">
                <input type="hidden" name="pid" id="pid" lay-verify="required">
                <ul id="menuTree" class="dtree" data-id="0"></ul>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单图标</label>
            <div class="layui-input-block">
                <input type="text" name="icon" placeholder="请输入图标class" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">访问路径</label>
            <div class="layui-input-block">
                <input type="text" name="href" placeholder="请输入路由路径" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限标识</label>
            <div class="layui-input-block">
                <input type="text" name="permissionCode" placeholder="如:system:menu:view" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否展开</label>
            <div class="layui-input-block">
                <input type="radio" name="open" checked="" value="1" title="展开">
                <input type="radio" name="open" value="0" title="折叠">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否可用</label>
            <div class="layui-input-block">
                <input type="radio" name="available" checked="" value="1" title="可用">
                <input type="radio" name="available" value="0" title="禁用">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: center;">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="doSubmit" id="doSubmit"><span
                        class="layui-icon layui-icon-add-1"></span>提交
                </button>
                <button type="reset" class="layui-btn layui-btn-warm"><span
                        class="layui-icon layui-icon-refresh-1"></span>重置
                </button>
            </div>
        </div>
    </form>
</div>
<!-- 添加和修改的弹出层结束 -->

<script type="text/javascript" src="/layui/layui.js"></script>
<script th:inline="javascript">
    layui.extend({
        dtree: '/layui_ext/dtree/dtree'
    }).use(['jquery', 'form', 'table', 'layer', 'dtree'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var dtree = layui.dtree;

        // 初始化表格（修正列配置）
        var tableIns = table.render({
            elem: '#menuTable',
            url: '/menu/list',
            toolbar: '#menuToolBar',
            title: '菜单数据表',
            height: 'full-40',
            page: true,
            cols: [ [
            {field:'id', title:'ID',align:'center'},
                {field: 'pid',title: '父菜单', align: 'center'},
                {field:'title', title:'菜单名称',align:'center'},
                {field:'href', title:'访问路径',align:'center'},
                {field:'permissionCode', title:'权限标识',align:'center'},
                {field:'available', title:'状态',align:'center',templet:function(d){
                    return d.available==1?'<font color=blue>可用</font>':'<font color=red>禁用</font>';
                }},{fixed: 'right', title:'操作', toolbar: '#menuRowBar',align:'center',width:'300'}
            ]]
        });

        // 初始化父菜单树
        // 初始化菜单树（支持层级展开）
        var selectTree = dtree.renderSelect({
            elem: "#menuTree",
            dataStyle: "layuiStyle",
            dataFormat: "list",
            response: { message: "msg", statusCode: 0 },
            url: "/menu/tree",
            method: "GET",
            line: true, // 显示连接线
            icon: ["2", "-1"], // 自定义图标
            initLevel: 2 // 默认展开两级
        });

        // 监听节点点击（自动填充父菜单ID）
        dtree.on("node(menuTree)", function(obj) {
            $("#pid").val(obj.param.nodeId);
            form.render(); // 刷新表单状态
        });

        // 工具栏事件
        table.on('toolbar(menuTable)', function (obj) {
            if (obj.event === 'add') {
                openAddLayer();
            }
        });

        // 行工具事件
        table.on('tool(menuTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'update') {
                openUpdateLayer(data);
            } else if (obj.event === 'delete') {
                deleteMenu(data);
            }
        });

        var mainIndex, url;

        // 提供给左侧树的刷新方法
        window.reloadTable = function (pid) {
            tableIns.reload({
                where: { pid: pid },
                page: { curr: 1 }
            });
        };

        // 打开添加层
        function openAddLayer() {
            mainIndex = layer.open({
                type: 1,
                content: $("#addOrUpdateDiv"),
                area: ['600px', '500px'],
                title: '添加菜单',
                success: function () {
                    $("#dataFrm")[0].reset();
                    $("#pid").val("");
                    selectTree.selectVal("");
                    url = "/menu/add";
                }
            });
        }

        // 打开修改层
        function openUpdateLayer(data) {
            mainIndex = layer.open({
                type: 1,
                content: $("#addOrUpdateDiv"),
                area: ['600px', '500px'],
                title: '修改菜单',
                success: function () {
                    form.val("dataFrm", data);
                    dtree.dataInit("menuTree", data.pid);
                    dtree.selectVal("menuTree");
                    url = "/menu/update";
                }
            });
        }

        // 提交表单
        form.on('submit(doSubmit)', function(data) {
            // 自动填充type字段
            data.field.type = "menu";

            $.ajax({
                url: url,
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(data.field),
                success: function(res) {
                    layer.msg(res.msg);
                    if (res.code === 200) {
                        tableIns.reload();
                        window.parent.left.menuTree.reload();
                        layer.close(mainIndex);
                    }
                },
                error: function(xhr) {
                    layer.msg("请求失败: " + xhr.statusText);
                }
            });
            return false;
        });

        // 删除菜单
        function deleteMenu(data){
            $.post("/menu/checkMenuHasChildrenNode",{id:data.id},function(result){
                if(result.value){
                    layer.msg("当前菜单节点有子菜单，无法删除");
                }else{
                    layer.confirm('你确定要删除【'+data.title+'】菜单吗?', {icon: 3, title:'提示'}, function(index){
                        $.post("/menu/delete",{id:data.id},function(res){
                            if(res.code==200){
                                location.reload();
                                //刷新下拉树
                                selectTree.reload();
                                //刷新左边的部门树
                                window.parent.left.DemoTree.reload();
                            }
                            layer.msg(res.msg);
                        })
                        layer.close(index);
                    });
                }
            })
        }

        // 提供给左侧树的刷新方法
        function reloadTable(id){
            tableIns.reload({
                where:{
                    id:id
                },
                page:{
                    curr:1
                }
            });
        }
    });
</script>
</body>
</html>